<template>
    <el-dialog
      title="剧目基本编辑"
      :visible.sync="editShowVisible"
      :before-close="colseEditShowDialog"
      @opened="openDialog"
      width="50%">
      <el-form class="editshowform" :model="editFrom" ref="editFromRef" :inline="true">
        <el-row>
          <el-form-item prop="showName" label="剧目名称" >
            <el-input prefix-icon="el-icon-user-solid" v-model="editFrom.showName"></el-input>
          </el-form-item>
          <el-form-item prop="date" label="演出日期">
            <el-date-picker
              v-model="editFrom.date"
              type="date"
              placeholder="选择日期"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item prop="date" label="剧目类型">
            <el-select v-model="editFrom.type" :placeholder="editFrom.type">
              <el-option
                v-for="(item, index) in showType"
                :key="index"
                :label="item"
                :value="item">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="date" label="演出场馆">
            <el-select v-model="editFrom.hall" :placeholder="editFrom.hall">
              <el-option
                v-for="(item, index) in showHall"
                :key="index"
                :label="item"
                :value="item">
              </el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <el-divider>编辑价格区间</el-divider>
        <el-row>
          <el-col>
            <el-table :data="editFrom.priceRange" class="pricerange" width="50%" aling="center">
              <el-table-column prop="class" label="价位等级" width="200">
                <template  slot-scope="scope">
                   <el-input prefix-icon="el-icon-lock" v-model="scope.row.class"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="price" label="对应价格" width="200">
                <template  slot-scope="scope">
                   <el-input prefix-icon="el-icon-lock" v-model.number="scope.row.price" @blur="priceSort()"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="200">
                <template slot="header">
                   <el-button type="success" @click="addPrice()">添加</el-button>
                 </template>
                <template  slot-scope="scope">
                   <el-button type="danger" @click="deletPrice(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
        </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="colseEditShowDialog()">取 消</el-button>
        <el-button type="primary" @click="sendEdit()">确 定</el-button>
      </span>
   </el-dialog>
</template>

<script>
// 导入网络请求
import { posteditshow } from '../../../network/theaterManage'
export default {
  name: 'editShowDialog',
  props: {
    // 控制对话框显示
    editShowVisible: {
      type: Boolean,
      default: false
    },
    // 可以更换的演出厅
    showHall: {
      type: Array,
      default () {
        return []
      }
    },
    // 传入的当前演出信息
    showinfo: {
      type: Object,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      // 当前需要编辑剧目的数据
      editFrom: {},
      // 剧目类型数据
      showType: ['音乐会', '歌剧', '戏剧', '音乐剧', '舞蹈/舞剧', '儿童剧', '演唱会', '戏曲', '综艺', '艺术活动', '秀', '音乐剧场', '其他']
    }
  },
  methods: {
    // 冒泡排序
    bubbleSort (arr) {
      let len = arr.length
      for (var i = 0; i < len; i++) {
        for (let j = 0; j < len - 1 - i; j++) {
          if (arr[j].date > arr[j + 1].date) { // 相邻元素两两对比
            let temp = arr[j + 1] // 元素交换
            arr[j + 1] = arr[j]
            arr[j] = temp
          }
        }
      }
    },
    // 删除这行价格
    deletPrice (r) {
      // console.log(r.price)
      let i = this.editFrom.priceRange.findIndex((item, index) => {
        return item.price === r.price
      })
      // console.log(i)
      // splice直接操作原数组1
      this.editFrom.priceRange.splice(i, 1)
    },
    // 添加新一行的价格
    addPrice () {
      this.editFrom.priceRange.splice(0, 0, {
        class: `${this.editFrom.priceRange.length + 1}`,
        price: 0
      })
    },
    // 对更新后的价格进行排序
    priceSort () {
      let arr = this.editFrom.priceRange
      let len = arr.length
      // 对价格进行冒泡排序
      for (let i = 0; i < len; i++) {
        for (let j = 0; j < len - 1 - i; j++) {
          if (arr[j].price > arr[j + 1].price) { // 相邻元素两两对比
            let temp = arr[j + 1] // 元素交换
            arr[j + 1] = arr[j]
            arr[j] = temp
          }
        }
      }
      // 对排序后的数组进行重新分配等级
      for (let k = 0; k < len; k++) {
        arr[k].class = `${len - k}`
      }
      this.editFrom.price = `${this.editFrom.priceRange[0].price}-${this.editFrom.priceRange[this.editFrom.priceRange.length - 1].price}`
    },
    // 将更改后的数据发送给后端
    sendEdit () {
      // this.$axios.post(`/edit`, this.editFrom)
      posteditshow(this.editFrom).then(res => {
        if (res.status === 200) {
          // 如果传输数据前后发生改变了才会重新提交数据
          // 传输过来的数据重新给theaterInfo来刷新展示
          this.$emit('changeShowLimit')
        } else {
          this.$message.warning('信息没有更改')
        }
      })
    },
    // 关闭这个对话框的时候要清除添加数据以及还原标识符
    colseEditShowDialog () {
      this.$emit('closeEditShowDialog')
      this.editFrom = {}
    },
    // 打开对话框的时候要把传入的showinfo的值给editFrom
    openDialog () {
      this.editFrom = this.showinfo
    }
  }
}
</script>

<style lang="stylus" scoped>

</style>
